@import "../../../css/common-var";
.bottom-control {
  width: calc(~"18% - 4px");
  height: 5.7vh;
  border-top: 1px solid @border-color_normal;
  background: var(--dropdown-bg-color);
  border-radius: 5px;
  position: fixed;
  bottom: 0;
  display: flex;
  padding: 5px 5px;
  z-index: 99;

  .left {
    display: flex;
    align-items: center;
    width: 35%;
    height: 100%;

    .avatar {
      border-radius: 5px;
      overflow: hidden;
      margin-right: 5px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      max-height: 100%;
      max-width: 38%;

      img {
        width: 100%;
      }
    }

    .musicInfo {
      color: var(--font-color);
      font-size: 0.77rem;
      width: 62%;

      .music-name {
        margin-bottom: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .singer {
        transform: scale(0.9);
        margin-left: -3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }

  .center {
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    .buttons {
      display: flex;
      align-items: center;
      height: 25%;
      width: 100%;

      .iconfont {
        font-size: 1rem;
      }

      span {
        display: flex;
        width: 100%/5;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
      }

      span:nth-child(3) i {
        font-size: 25px;
      }
    }

    .progressBar {
      display: flex;
      align-items: center;
      height: 30%;
      margin-top: 5px;
      overflow: hidden;
      width: 100%;

      .currentTime,
      .totalTime {
        font-size: 12px;
        transform: scale(0.9);
        color: #aaa;
        width: 32px;
        text-align: center;
      }

      .progress-wrapp {
        margin: 0 2px;
        width: 68%;
      }

      .totalProgress {
        //margin: 0 6px;
        cursor: pointer;
        width: 100%;
        height: 6px;
        background-color: #c6c6c6;
        border-radius: 10px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
      }

      .currentProgress {
        width: 0;
        height: 100%;
        border-radius: 10px;
        background-color: red;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
      }
    }
  }


  .right {
    display: flex;
    align-items: center;
    position: relative;
  }

}

/deep/ .volume-control-tooltip {

  .ant-tooltip-content {
    .ant-tooltip-inner {
      background-color: transparent !important;
      box-shadow: none;
      padding: 0;
      display: flex;
      justify-content: center;
    }
  }

  .ant-tooltip-arrow {
    display: none;
  }

  .volume-input {
    direction: rtl;
    writing-mode: vertical-lr;
    width: 6px;
    height: 80px;
  }
}


.volumeControl {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.icon-yinliang {
  font-size: 18px;
  margin-right: 7px;
}

.volumeSlider {
  width: 55px;
}

.icon-bofangliebiao {
  font-size: 18px;
  margin-right: 10px;
}

.icon-zantingtingzhi {
  font-size: 35px !important;
}

.drawerHeader {
  font-size: 12px;
  transform: scale(0.9);
  color: #aaa;
  padding: 15px 0;
}

.downloadContainer {
  height: 100%;
  position: relative;
}

.downloadContainer i {
  position: absolute;
  bottom: 5px;
}

.recondInfo {
  position: absolute;
  font-size: 12px;
  transform: scale(0.8);
  width: 140px;
  right: -5px;
  bottom: -5px;
}

.center .icon-suiji1 {
  font-size: 15px;
}

.detail-control {
  background: #FFFFFF;
  color: @light-font-color;

  .musicInfo {
    color: @light-font-color !important;
  }
}
